<template lang="">
  <div>
    <!-- 搜索 -->
    <QueryForm
      :searchForm="searchForm"
      :items="items"
      @search="search"
      @list="list"
    ></QueryForm>
    <!-- 操作按钮区域 -->
    <div class="btn-panel">
      <el-button
        type="danger"
        size="small"
        icon="el-icon-delete"
        @click="del"
        >删除</el-button
      >
    </div>
    <!-- 表格 -->
    <Table1
      ref="multipleTable"
      :tableData="tableData"
      :tableCols="tableCols"
      :isOperation="false"
      @showEditView="showEditView()"
      @deleteUser="deleteUser()"
    >
  <template slot-scope="scope" slot="slot_sex">
      <el-tag v-if="scope.data.sex==0" type="success" size="mini">男</el-tag>
      <el-tag v-else-if="scope.data.sex==1" type="warning">女</el-tag>
      <el-tag v-else  type="info">null</el-tag>

  </template>
  </Table1>
    <div style="margin-top: 20px">
      <!-- 分页组件 -->
      <Page1
        :pages="pages"
        :total="total"
        @handleCurrentChange="handleCurrentChange"
        @handleSizeChange="handleSizeChange"
      ></Page1>
    </div>
   
  </div>
</template>
<script>
import Table1 from "@/components/Table1";
import Page1 from "@/components/Page1";
import QueryForm from "@/components/QueryForm";
export default {
  name: "Student",
  components: { Table1, Page1, QueryForm },
  data() {
    return {
      tableData: [],
      tableCols: [
        // { prop: "id", label: "ID", width: "80" },
        { prop: "name", label: "姓名" },
        { prop: "account", label: "用户名" },
        { prop: "password", label: "密码" },
        { prop: "birthday", label: "生日" },
        { prop: "profession_id", label: "专业" },
        { prop: "college", label: "学校" },
        { prop: "education", label: "学历" },
        { prop: "phone", label: "手机号码", width: "130" },
        { prop: "sex", label: "性别", slot: "slot_sex" },
        { prop: "graduate_date", label: "毕业时间" },
      ], //表格的列
      total: 0,
      pages: 1,
      currentPage: 1,
      size: 10,
      searchForm: {
        //查询的表单
        account: "", //用户名
        name: "", //姓名
      },
      items: [
        {
          type: "text",
          label: "用户名：",
          name: "account",
          placeholder: "按用户名查询",
        },
        {
          type: "text",
          label: "姓名：",
          name: "name",
          placeholder: "按关键字查询查询",
        },
      ],

      // 选择的信息
      selection: {},
    };
  },
  mounted() {
    this.list();  this.selection = this.$refs["multipleTable"].selection;
  },
  methods: {
    list() {
      let url =
        "/student/queryPage?currentPage=" +
        this.currentPage +
        "&size=" +
        this.size;
      this.getRequest(url).then((res) => {
        if (res) {
          console.log(res, "学生==");
          this.tableData = res.data;
          this.total = res.total;
          this.pages = res.pages;
        }
      });
    },
    // 当前页改变
    handleCurrentChange(page) {
      this.currentPage = page;
      this.list();
    },
    // 当前size改变
    handleSizeChange(size) {
      this.size = size;
      this.list();
    },
    // 查询
    search() {
      this.postRequest("/student/queryByCon", this.searchForm).then((res) => {
        if (res) {
          console.log(res, "搜索后的数据");
          this.tableData = res;
        }
      });
    },
    // 删除
    del(){
      this.selection = this.$refs["multipleTable"].selection;
      console.log(this.selection, "批量删除");
      if (this.selection.length == 0) {
        this.$message.warning("请选择后再删除");
        return;
      }
      this.$confirm(
        "此操作将永久删除 [" + this.selection.length + "]个用户, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let ids = "?";
          this.selection.forEach((item) => {
            ids += "ids=" + item.id + "&";
          });
          console.log(ids, "ids===");
          this.deleteRequest("/student/" + ids).then((res) => {
            if (res) {
              this.$message.success(res.message);
              this.list();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    }
  },
};
</script>
<style lang=""></style>
